.in, .out {
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: 300ms;
  -webkit-animation-fill-mode: both;
}

.in {
  -webkit-animation-name: popin;
}

.out {
  -webkit-animation-name: popout;
}

.in.reverse {
  -webkit-animation-name: popin;
}

.out.reverse {
  -webkit-animation-name: popout;
}

@-webkit-keyframes popin {
  from {
    -webkit-transform: scale(.3);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes popout {
  from {
    -webkit-transform: scale(1);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(.3);
    opacity: 0;
  }
}
